import { defineComponent, PropType } from 'vue';
import { useNamespace } from '@ibiz-template/vue3-util';
import { useFilterModal } from '../util';
import { FilterSearchBarController } from '../../filter-search-bar.controller';
import './filter-modal.scss';

/**
 * 过滤器模态
 * - 用于绘制新建分组和重命名分组的模态组件
 */
export const FilterModal = defineComponent({
  name: 'FilterModal',
  props: {
    controller: {
      type: Object as PropType<FilterSearchBarController>,
      required: true,
    },
  },
  setup(props) {
    const ns = useNamespace('filter-modal');
    const c = props.controller;

    // 新建相关
    const {
      visible,
      formData,
      formRef,
      formRules,
      tooltip,
      handleSubmit,
      handleCancel,
    } = useFilterModal(c);

    return {
      ns,
      visible,
      tooltip,
      formData,
      formRef,
      formRules,
      handleSubmit,
      handleCancel,
    };
  },
  render() {
    return (
      <el-dialog
        v-model={this.visible}
        title={this.tooltip.title}
        modal-class={this.ns.b()}
      >
        {{
          default: () => {
            return (
              <el-form
                ref='formRef'
                model={this.formData}
                label-position='top'
                rules={this.formRules}
              >
                <el-form-item label={this.tooltip.label} prop='caption'>
                  <el-input
                    v-model={this.formData.caption}
                    placeholder={this.tooltip.placeholder}
                  />
                </el-form-item>
              </el-form>
            );
          },
          footer: () => {
            return (
              <div class={this.ns.b('footer')}>
                <el-button
                  class={this.ns.b('cancel-btn')}
                  onClick={this.handleCancel}
                >
                  取 消
                </el-button>
                <el-button type='primary' onClick={this.handleSubmit}>
                  确 定
                </el-button>
              </div>
            );
          },
        }}
      </el-dialog>
    );
  },
});
export default FilterModal;
